<template>
	<view class="global">
		<view style="background-color: #F5F5F5;">
			<!-- 首页轮播 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in images" :key="index">
						<image @click="toMeetRoomDetails(item.id)" style="width: 400px; height: 150px;"
							:src="item.image">
						</image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 公告展示 -->

			<view class="notice">
				<uni-notice-bar show-icon scrollable speed=35 :text="notice" />
			</view>

			<!-- 功能选项 -->
			<view class="cu-list grid col-3 no-border">
				<view @click="toReservation" class="cu-item">
					<view class="cuIcon-home">
					</view>
					<text style="color: #0081ff; font-size: 15px;">会议室</text>
				</view>
				<view @click="toMyReservation" class="cu-item">
					<view class="cuIcon-post">
					</view>
					<text style="color: #0081ff; font-size: 15px;">我的会议</text>
				</view>
				<view @click="toSignRecord" class="cu-item">
					<view class="cuIcon-attention">
					</view>
					<text style="color: #0081ff; font-size: 15px;">签到记录</text>
				</view>
				<view @click="toReservationRecord" class="cu-item">
					<view class="cuIcon-sort">
					</view>
					<text style="color: #0081ff; font-size: 15px;">历史会议</text>
				</view>
				<view @click="toQueryCount" class="cu-item">
					<view class="cuIcon-rank">
					</view>
					<text style="color: #0081ff; font-size: 15px;">查询统计</text>
				</view>
				<view @click="toNotify" class="cu-item">
					<view class="cuIcon-notice">
						<view class="cu-tag badge" v-if="badge!=0">
							{{badge}}
						</view>
					</view>
					<text style="color: #0081ff; font-size: 15px;">系统通知</text>
				</view>
			</view>
		</view>

		<view>
			<!-- 我的会议展示 -->
			<view>
				<uni-section type="line" title="今日会议" title-color="#0081ff" titleFontSize="17px"></uni-section>
			</view>
			<!-- 我的会议展示 -->
			<view @click="toMeetDetail(item.id)" v-for="(item,index) in meetData" :key="index">
				<uni-card style="height: auto;">
					<view style="display: flex;">
						<view>
							<uni-section titleColor="#2979ff" :title="item.theme" type="circle"></uni-section>
							<view><text style="color: #f37b1d;" class="Text">时间：{{item.beginTime}}</text></view>
							<view><text style="color: #8dc63f;" class="Text">会议室：{{item.roomName}}</text></view>
							<view><text style="color: #1cbbb4;" class="Text">发起人：{{item.authorPhone}}</text></view>
							<view><text style="color: #6739b6;" class="Text">时长：{{item.meetLength}}分钟</text></view>
							<view><text style="color: #a5673f;" class="Text">备注：{{item.remark}}</text></view>
						</view>
						<view style=" display: flex;margin-left: 50px;">
							<view style=" margin-top: 65px;"><text style="color: #2979ff;">{{item.status}}</text></view>
							<view style="margin-top: 65px;"><uni-icons color="#A9A9A9" type="right"
									size="20"></uni-icons>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-if="flag" style="height: 160px;">
				<view style="margin-top: 40px;margin-bottom: 10px;margin-left: 140px">
					<image style="width: 110px; height: 110px;" src="@/static/icons/nodata.png"></image>
				</view>
				<view><text style="color: #A9A9A9; font-size: 14px; margin-left: 120px;">技术咨询：18214376259</text></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onPullDownRefresh,
		onLoad,
		onTabItemTap
	} from '@dcloudio/uni-app';
	import {
		getImage,
		getNotice
	} from "@/api/index.js";
	import {
		list
	} from '@/api/reservation.js';
	import {
		checkToken
	} from '@/utils/checkToken.js';
	import {
		getBadge
	} from '@/api/chat.js';
	import {share} from '@/utils/share.js';
	const userInfo = uni.getStorageSync('user');
	//监听底部tabbar
	onTabItemTap(() => {
		if (userInfo.role === '主管') {
			badge.value = 0;
		};
		getReservationMeeting();
		getBadges();
	});
	///////////////////////////////数据区
	const autoplay = ref(true);
	const interval = ref(4000);
	const duration = ref(1000);

	///////////////////////////////方法区

	const images = ref([{}]);
	const notices = ref([]);
	const notice = ref('');
	onLoad(async () => {
		share();
		// wx.showShareMenu({
		// 	withShareTicket: true,
		// 	//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
		// 	menus: ["shareAppMessage", "shareTimeline"]
		// });
		if (userInfo.role === '主管') {
			badge.value = 0;
		};
		//异步获取首页的会议室图片
		await getImage().then(res => {
			if (res.code === 200) {
				images.value = res.data;
			}
		});
		//异步获取公告内容
		await getNotice().then(res => {
			if (res.code === 200) {
				notices.value = res.data;
				notice.value = notices.value[0];
			}
		});
		//加载公告内容轮播
		await loadNotice();
		//进入会议加载
		await getReservationMeeting();
		await getBadges();
	})
	//公告内容轮播
	function loadNotice() {
		let i = 0;
		setInterval(() => { //定时器
			notice.value = notices.value[i++];
			if (i === notices.value.length) {
				i = 0;
			}
		}, 8000)
	};

	//跳转到会议室浏览页面
	function toReservation() {
		//检查是否登录
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/meetRoom/meetRoom'
			});
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//跳转到我的会议页面
	function toMyReservation() {
		//检查是否登录
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/myReservation/myReservation'
			})
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//跳转到签到记录页面
	function toSignRecord() {
		//检查是否登录
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/signRecord/signRecord'
			})
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//跳转到预约记录页面
	function toReservationRecord() {
		//检查是否登录
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/reservationRecord/reservationRecord'
			})
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//跳转到查询统计页面
	function toQueryCount() {
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/queryCount/queryCount'
			})
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//跳转到维修工单页面
	function toNotify() {
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/chat/chat'
			});
			badge.value = 0;
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//下拉刷新请求数据
	onPullDownRefresh(() => {
		getImage();
		getNotice();
		getReservationMeeting();
		getBadges()
		flag.value = false;
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 400);
	});

	const flag = ref(false);
	const meetData = ref([]);
	//获取登录用户的预约会议
	function getReservationMeeting() {
		const userInfo = uni.getStorageSync('user');
		list(userInfo.phone).then(res => {
			if (res.code === 200) {
				meetData.value = res.data;
				if (meetData.value === null) {
					flag.value = true;
				}
				if (meetData.value.length === 0) {
					flag.value = true;
				}
			}
		});
	};

	//转去会议详情页
	function toMeetDetail(id) {
		uni.navigateTo({
			url: '/pages/meetDetail/meetDetail?id=' + id
		})
	};

	//去会议室详情页
	function toMeetRoomDetails(id) {
		if (checkToken()) {
			uni.navigateTo({
				url: '/pages/meetRoomDetail/meetRoomDetail?id=' + id
			})
		} else {
			uni.navigateTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		}
	};

	//获取当前登录用户是否有需要知道的通知
	const badge = ref(0);

	function getBadges() {
		const userInfo = uni.getStorageSync('user');
		if ((userInfo.id !== undefined) && (userInfo.role !== '主管')) {
			getBadge(userInfo.id).then(res => {
				if (res.code === 200) {
					badge.value = res.data;
				}
			})
		}
	};
</script>

<style scoped lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.global {
		background-color: white;
		height: auto;
	}

	.notice {
		margin-top: 10px;
	}

	.demo-uni-row {

		height: 70px;
		display: flex;
	}

	.uni-col {
		margin-right: auto;
	}

	.uni-col_one {
		margin-left: 15px;
	}

	.uni-col_two {
		margin-left: 20px;
		margin-right: 20px;
	}

	.uni-col_three {
		margin-left: 10px;
		margin-right: auto;
	}

	.dark {
		width: 75px;
		background-color: white;
	}

	.light {
		background-color: white;
	}

	.uni_icon {
		margin-left: 20px;
	}

	.first {
		margin-top: 18px;
	}

	.second {
		margin-top: 18px;
	}

	.Text {
		color: #0081ff;
		font-size: 13px;
	}
</style>